<template>
  <div class="tab_bar_item_container">
      <div class="tab_bar_item_wrapper" @click="onClick">
          <slot name="icon"></slot>
          <div :class="isActive?'tab_bar_item_wrapper_title_active':'tab_bar_item_wrapper_title'">
              <slot name="title"></slot>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    props:{
        path:{
            type:String,
            required:true
        }
    },
    computed:{
        isActive:function(){
            return this.path === this.$route.path
        }
    },
    methods:{
        onClick(){
            this.$router.push(this.path)
        }
    }
}
</script>

<style scoped>
.tab_bar_item_container
{
    flex: 1;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.tab_bar_item_wrapper
{
    height: 100%;
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tab_bar_item_wrapper img
{
    width: 30px;
    height: 30px;
}

.tab_bar_item_wrapper_title
{
    font-size: 14px;
}

.tab_bar_item_wrapper_title_active
{
    color: red;
}
</style>